<template>
	<view class="content  ">
		<view class="padding">
			<view class="padding ffffff radius">
				<view class="ershil margin_right2">{{typeName}}</view>
				<textarea class="margin_top textareas" placeholder-style="font-size: 26rpx;color: #999999;" cols="30"
					rows="10" placeholder="请输入您的评价~" v-model="content"></textarea>
				<view class="flexleft flex_wrap">
					<view class="sanshisan flexcenter margin_top" v-for="(item,index) in images_arr" :key="index">
						<view class="shilitu dingwei" style="position: relative;">
							<image :src="item" mode="widthFix"></image>
							<view class="shanchubox" @click="delimage(index)">
								<view class="shanchu"></view>
							</view>
						</view>
					</view>
					<view class="sanshisan flexcenter margin_top" v-if="images_arr.length<3" @click="uploadImg(3)">
						<view class="djsc">
							<image src="/static/image/home/noimage.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdb">
				<view class="bigbtn" @click="submit">发表</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import upFile from "@/utils/upload.js"
	export default {
		data() {
			return {
				typeName: "",
				listid: "",
				content: "", //评论内容
				images_arr: [], //评论内容
				images: [],
			}
		},
		onLoad(options) {
			this.listid = options.id
			options.type == 1 ? this.typeName = "商品评价" : this.typeName = "服务评价"
		},
		methods: {
			submit() {
				if (this.content == "") {
					httpRequest.toast("请输入评价内容")
					return
				}
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				let url = "/api/goods_order/comment"
				let data = {
					order_id: this.listid,
					content: this.content,
					images: this.images.join()
				}
				if(this.typeName=="服务评价"){
					url = "/api/service_order/comment"
					data = {
						order_id: this.listid,
						content: this.content,
						images: this.images.join()
					}
				}
				httpRequest.request(url, 'POST', data, false, false, true).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				}).catch(err => {
					uni.hideLoading()
					httpRequest.toast(err.msg);
				})
			},
			delimage(index) {
				this.images_arr.splice(index, 1)
			},
			uploadImg(length) {
				var that = this;
				var martial_images = that.images
				var martial_images_arr = that.images_arr
				if (martial_images.length >= length) {
					httpRequest.toast('最多上传' + length + '张图片');
					return;
				}
				upFile.chooseImage({
					count: length - martial_images.length
				}, function(res) {
					console.log(res);
					martial_images_arr.push(res.fullurl)
					martial_images.push(res.url)
					that.images_arr = martial_images_arr
					that.images = martial_images
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noershil {
		width: 200rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.djsc {
		width: 198rpx;
		height: 198rpx;
		border-radius: 7rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 7rpx;
		}
	}

	.shanchu {
		width: 13rpx;
		height: 13rpx;
		background-size: 100% 100%;
		background-image: url("/static/image/home/delete.png");
	}

	.shanchubox {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 39rpx;
		height: 23rpx;
		background: #D0D0D0;
		border-radius: 0px 7rpx 0px 7rpx;
	}

	.shilitu {
		width: 198rpx;
		height: 198rpx;
		border-radius: 7rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 7rpx;
		}
	}

	.sanshisan {
		width: 33.33%;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
		height: 203rpx;
		padding: 30rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EFEFEF;
	}

	.ershil {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
</style>